<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>area</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/lib/layuimini2/lib/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="/lib/layuimini2/css/public.css" media="all">
	<link rel="stylesheet" href="/css/common.css" media="all">
</head>
<body>
<div class="layuimini-container">
	<div class="layuimini-main">
		<fieldset class="table-search-fieldset">
			<legend>搜索信息</legend>
			<div style="margin: 10px 10px 10px 10px">
				<form class="layui-form layui-form-pane" action="">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">名称</label>
							<div class="layui-input-inline">
								<input type="text" name="name" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<button type="submit" class="layui-btn layui-btn-primary" lay-submit
							        lay-filter="data-search-btn"><i class="layui-icon layui-icon-search"></i> 搜 索
							</button>
							<button type="button" class="layui-btn layui-btn-normal" id="add"><i
									class="layui-icon layui-icon-add-1"></i>添加
							</button>
						</div>
					</div>
				</form>
			</div>
		</fieldset>
		<table id="area-table" class="layui-table" lay-filter="area-table"></table>
	</div>
</div>
</div>
<form class="layui-form layui-form-pane" id="layerForm" lay-filter="dataForm" style="display: none;padding:5px">
	<input type="hidden" name="id" id="id"/>
	<input type="hidden" name="pid" id="pid"/>
	<div class="layui-form-item" id="pItem">
		<label class="layui-form-label">上级区域</label>
		<div class="layui-input-block  col12">
			<input id="pName" type="text" readonly class="layui-input">
		</div>
	</div>
	<div class="layui-form-item" widthoffset="10">
		<div class="layui-inline">
			<label class="layui-form-label required">名称</label>
			<div class="layui-input-block  col6">
				<input type="text" name="name" lay-verify="required" lay-reqtext="名称不能为空" placeholder="请输入名称" value=""
				       class="layui-input">
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label required">排序</label>
			<div class="layui-input-block  col6">
				<input type="text" name="sort" value="" class="layui-input" placeholder="请输入数字"
				       lay-verify="positiveInteger">
			</div>
		</div>
	</div>
	<div class="layui-form-item">
		<div class="layui-input-block col12">
			<textarea name="note" class="layui-textarea" placeholder="请输入备注"></textarea>
		</div>
	</div>

	<div class="layui-form-item btns">
		<div class="layui-input-block">
			<button id="submitBtn" class="layui-btn layui-btn-radius" lay-submit lay-filter="layerForm">确定</button>
			<button class="layui-btn layui-btn-radius layui-btn-primary cancel" type="button">取消</button>
		</div>
	</div>
</form>
<!-- 操作列 -->
<script type="text/html" id="tableRowBar">
	<a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
	<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="/lib/layuimini2/lib/layui/layui.js" charset="utf-8"></script>
<script src="/lib/layuimini2/js/lay-config.js" charset="utf-8"></script>
<script src="/js/common.js" charset="utf-8"></script>
<script>
	layui.use(['table', 'treetable', 'form'], function () {
		var $ = layui.jquery,
			table = layui.table,
			treetable = layui.treetable,
			form = verifyForm(layui.form);
		var layerFormIdx;
		// 渲染表格
		renderTreeTable();

		$(".btns .cancel").click(function () {
			layer.closeAll();
		});

		// 监听搜索操作
		form.on('submit(data-search-btn)', function (data) {
			//执行搜索重载
			renderTreeTable(data.field);
			return false;
		});

		$('#add').click(function () {
			$("#layerForm")[0].reset();
			$("#pid").val("0");
			$("#id").val("");
			$("#pItem").hide();
			layerFormIdx = layerForm(layer, $, {
				title: '添加',
				content: $("#layerForm"),
				type: 1,
				area: "540px",
				shade: 0.2,
				maxmin: true,
				shadeClose: false,
			});
			submitLayerForm("layerForm", '/area/add', "添加");
		});
		// $('#btn-expand').click(function () {
		// 	treetable.expandAll('#area-table');
		// });
		//
		// $('#btn-fold').click(function () {
		// 	treetable.foldAll('#area-table');
		// });

		//监听工具条
		table.on('tool(area-table)', function (obj) {
			var data = obj.data;
			var layEvent = obj.event;

			if (layEvent == 'add') {
				$("#pItem").show();
				$("#layerForm")[0].reset();
				$("#pName").val(data.name);
				$("#pid").val(data.id);
				$("#id").val("");
				layerFormIdx = layerForm(layer, $, {
					title: '添加',
					content: $("#layerForm"),
					type: 1,
					area: "540px",
					shade: 0.2,
					maxmin: true,
					shadeClose: false,
				});
				submitLayerForm("layerForm", '/area/add', "添加");
			} else if (layEvent == 'edit') {
				$("#pItem").hide();
				$("#layerForm")[0].reset();
				form.val("dataForm", data);
				layerFormIdx = layerForm(layer, $, {
					title: '修改',
					content: $("#layerForm"),
					type: 1,
					area: "540px",
					shade: 0.2,
					maxmin: true,
					shadeClose: false,
				});
				submitLayerForm("layerForm", '/area/edit', "修改");
			} else if (layEvent == 'del') {
				layer.confirm('确定删除吗？', function (index) {
					myAjax($, layer, {
						url: "/area/del",
						type: 'POST',
						data: {
							id: obj.data.id
						},
						dataType: "json",
						success: function (d, s) {
							if (d.code == 1) {
								layer.msg('删除成功', {icon: 1, time: 1500});
								renderTreeTable();
							}
						}
					});
					layer.close(index);
				});
			}
		});

		function renderTreeTable(query) {
			myTreeTableRend(treetable, layer, {
				treeColIndex: 0,
				treeSpid: 0,
				treeIdName: 'id',
				treePidName: 'pid',
				elem: '#area-table',
				url: '/area/list',
				where: query,
				page: false,
				cols: [[
					{field: 'name', minWidth: 200, title: '名称'},
					{field: 'note', align: 'center', title: '备注'},
					{width: 150, align: 'center', title: '操作', templet: '#tableRowBar'}
				]]
			});
		}

		function submitLayerForm(filter, url, action, row) {
			form.on('submit(' + filter + ')', function (data) {
				myAjax($, layer, {
					url: url,
					type: 'POST',
					data: data.field,
					dataType: "json",
					success: function (d, s) {
						if (d.code == 1) {
							layer.msg(action + '成功', {icon: 1, time: 1500});
							renderTreeTable();
						}
					},
					complete: function (xhr, status) {
						layer.close(layerFormIdx);
					}
				});
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
		}

	});
</script>
</body>
</html>